<template>
    <div class="favorate-warp">
        <tab :custom-bar-width="getBarWidth" :scroll-threshold="5" :line-width="2" bar-active-color="#feba4e">
            <tab-item v-for="(item,index) in tabItem" :selected="index ==idx" @on-item-click="choose(item.type,item)" :key="index">{{item.text}}</tab-item>
        </tab>
        <div class="group" v-if="idx==0">
            <div class="cell-box" v-if="collectList.length>0&&idx==0" v-for="(item,index) in collectList" :key="index">
                <router-link :to="{ path:'/newsDetail',query:{newsId:item.id}}">
                   <div class="news-box">
                        <img :src="item.img" alt="" class="left">
                        <div class="right">
                            <div class="name-box">{{item.title}}</div>
                            <div class="section-line">
                                {{item.simple_text}}
                            </div>
                            <div class="section-line supplement">
                                <span>{{item.createDateName}}</span>
                                <span v-if="item.read_number">浏览·{{item.read_number}}</span>
                                <span v-else>浏览·0</span>
                            </div>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
         <div class="group" v-else-if="idx==1">
            <div class="cell-box" v-if="collectList.length>0&&idx==1" v-for="(item,index) in collectList" :key="index" >
                <router-link :to="{ path:'/',query:{userId:$route.query.userId,shopId:item.id}}">
                   <div class="news-box">
                        <img :src="item.shop_img" alt="" class="shop-left">
                        <div class="shop-right">
                            <div class="name-box">{{item.shop_name}}</div>
                            <div class="section-line">
                                {{item.simple_text}}
                            </div>
                        </div>
                    </div>
                </router-link>
            </div>
         </div>
          <div class="group" v-else-if="idx==2">
            <div class="cell-box" v-if="collectList.length>0&&idx==2" v-for="(item,index) in collectList" :key="index" @click="godetail(item)">
                <!-- <router-link :to="{ path:'/newsDetail',query:{newsId:item.id}}"> -->
                   <div class="news-box">
                        <img :src="item.logo" alt="" class="left">
                        <div class="right">
                            <div class="name-b">{{item.name}}</div>
                            <div class="section-line supplement">
                                <span >价格·{{item.discount_price}}</span>
                            </div>
                        </div>
                    </div>
                <!-- </router-link> -->
            </div>
        </div>
         <div class="group"  v-else >
           <div class="cell-box">
                <div class="news-box">
                    还没有收藏任何内容，赶紧去收藏吧
                </div>
           </div>
         </div>
         
    </div>
</template>

<script>
    import axios from '@/api/request'
    import {
        Cell,
        Group,
        CellBox,
        Card,
        Tab,
        TabItem
    } from "vux";

    export default {
        data() {
            return {
                tabItem: [
                    {
                     type:'0',
                     text:"收藏文章",
                     tableName:'tb_information'
                    },
                    {
                     type:1,
                     text:"收藏店铺",
                     tableName:'tb_shop'
                    },
                    {
                     type:2,
                     text:"收藏商品",
                     tableName:'tb_information'
                    }],
                collectList:[],         //收藏列表
                idx:"0",
            }
        },
        components: {
            TabItem,
            Cell,
            Group,
            CellBox,
            Tab,
        },
        created() {
            this.fetchCollectList()
        },
        methods: {
            godetail(item){
               if(item.type){
                  this.$router.push({ path:'/secGoodsDetail', query: { userId:this.$route.query.userId,goodsId:item.id }})
               }else{
                   this.$router.push({ path:'/goodsDetail', query: { userId:this.$route.query.userId,goodsId:item.id }})
               }
            },
            choose(id,name){
              this.idx=id
              this.fetchCollectList(name)
            },
            getBarWidth: function(index) {
                index = index || 0;
                let text = this.tabItem[index];
                // debugger
                return text.length * 16 / 37.5  + "rem";
            },
            fetchCollectList(name){
                let userId = this.$route.query.userId
                if(!name){
                    name='tb_information'
                }else{
                  name=name.tableName
                }
                var self=this
                var data={
                   pageNumber: 1,
                   pageSize: 10,
                   param:{
                     userId:userId,
                     type : self.idx,
                     tableName : name
                   }
                }
                axios('/device/collection/getMy','post',data).then(res=>{
                    if(res.data.code==1000){
                        console.log(res)
                        this.collectList = res.data.data.list;
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .group{
        padding-top:44px;
    }
    .name-b{
        height: 50rem/37.5;
        padding-top:9rem/37.5;
        display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
    }
    .news-box {
        position: relative;
        min-width: 100rem/37.5;
        border-bottom: 1rem/37.5 solid #dbdbdb;
        .left {
            position: absolute;
            width: 100rem/37.5;
            height: 75rem/37.5;
            left: 15rem/37.5;
            top: 9rem/37.5;
        }
        .shop-left{
            position: absolute;
            width: 60rem/37.5;
            height: 40rem/37.5;
            left: 15rem/37.5;
            top: 9rem/37.5;
        }
        .shop-right{
            margin-left: 90rem/37.5;
            margin-right: 27rem/37.5;
            line-height: 59rem/37.5;
        }
        .right {
            margin-left: 130rem/37.5;
            margin-right: 27rem/37.5;
            .name-box {
                padding-top: 7rem/37.5;
                font-size: 13rem/37.5;
                color: #444444;
            }
            .section-line {
                font-size: 12rem/37.5;
                color: #999999;
                overflow:hidden; 
                text-overflow:ellipsis;
                display:-webkit-box; 
               -webkit-box-orient:vertical;
               -webkit-line-clamp:2; 
                margin-top: 3rem/37.5;
            }
            .supplement{
                display: flex;
                justify-content: space-between;
                margin-top: 12rem/37.5;
                padding-bottom: 6rem/37.5;
            }
        }
    }
</style>

<style>
  #app .favorate-warp .vux-tab-warp{
      padding-top:0;
  }
    .favorate-warp .vux-tab .vux-tab-item.vux-tab-selected {
        color: #feba4e;
    }

    .favorate-warp .vux-tab .vux-tab-item {
        color: #333333;
    }
</style>
